<template>
  <div class="Information">
      <label class="la" id="Identity">身份：</label>
      <span  id="identity">{{ userIdentity }}</span>
      <label class="la" id="Id">I&nbsp;&nbsp;&nbsp;D：</label>
      <span  id="id">{{ userId }}</span>
      <label class="la" id="Name">姓名：</label>
      <span  id="name">{{ userName }}</span>
      <label class="la" id="Email">邮箱：</label>
      <span  id="email">{{ userEmail }}</span>
      <button class="changePasswordButton" @click="showChangePassword=true">修改密码</button>
      <ChangePassword v-show="showChangePassword" class="changePasswordComponent" @closeChangePass="closeChangePass"/>
    </div>
</template>

<script scoped>
import ChangePassword from './ChangePassword.vue';
export default {
    name:'Information',
    components:{
      ChangePassword,
    },
    data(){
      return{
        showChangePassword:false,
      }
    },
    methods:{
      closeChangePass(){
        this.showChangePassword=false;
      }
    },
    computed:{
      userIdentity(){
        return sessionStorage.getItem('Identity');
      },
      userEmail(){
        return sessionStorage.getItem('Email');
      },
      userName(){
        return sessionStorage.getItem('Name');
      },
      userId(){
        return sessionStorage.getItem('Id');
    }
  }
}
</script>

<style scoped>
.changePasswordComponent{
  width: 360px;
  height: 290px;
  border: 1px solid #a6c1ee;
  position: absolute;
  top:13%;
  left: -150%;
  border-radius: 6px;
}
#identity,#id,#name,#email{
  font-size:14px;
  color: #424448;
  font-weight:500;
}
#identity{
  position: absolute;
  top: 43.5%;
  left: 85px;
}
#id{
  position: absolute;
  top: 53.2%;
  left: 85px;
}
#name{
  position: absolute;
  top: 62.6%;
  left: 85px;
}
#email{
  position: absolute;
  top: 72.1%;
  left: 85px;
}

.changePasswordButton {
  text-align: center;
  padding: 5px;
  border-radius: 23px;
  border:1px solid #6e89b0;
  font-weight: 700;
  font-size: 14px;
  width: 36%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 450%);
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
}

.la {
  color: rgb(65, 65, 65);
  font-size: 15px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
}
.la[id="Identity"] {
  transform: translate(-220%, -130%);
}
.la[id="Id"] {
  transform: translate(-222%, 60%);
}
.la[id="Name"] {
  transform: translate(-220%, 250%);
}
.la[id="Email"] {
  transform: translate(-220%, 440%);
}

</style>